
@supports (height: 100cqh) {
  :root {
      --cqh-full:100cqh;
      --cqw-full: 100cqw
  }
}

@supports not (height: 100cqh) {
  :root {
      --cqh-full:100dvh;
      --cqw-full: 100dvw
  }
}
:root {
  --spring-fast-duration: 667ms;
  --spring-fast: linear(0,.01942 1.83%,.07956 4.02%,.47488 13.851%,.65981 19.572%,.79653 25.733%,.84834 29.083%,.89048 32.693%,.9246 36.734%,.95081 41.254%,.97012 46.425%,.98361 52.535%,.99665 68.277%,.99988);
  --spring-common-duration: 667ms;
  --spring-common: linear(0,.00506 1.18%,.02044 2.46%,.08322 5.391%,.46561 17.652%,.63901 24.342%,.76663 31.093%,.85981 38.454%,.89862 42.934%,.92965 47.845%,.95366 53.305%,.97154 59.516%,.99189 74.867%,.9991);
  --spring-slow-bounce-duration: 1167ms;
  --spring-slow-bounce: linear(0,.00172 .51%,.00682 1.03%,.02721 2.12%,.06135 3.29%,.11043 4.58%,.21945 6.911%,.59552 14.171%,.70414 16.612%,.79359 18.962%,.86872 21.362%,.92924 23.822%,.97589 26.373%,1.01 29.083%,1.0264 31.043%,1.03767 33.133%,1.04411 35.404%,1.04597 37.944%,1.04058 42.454%,1.01119 55.646%,1.00137 63.716%,.99791 74.127%,.99988);
  --spring-bounce-duration: 833ms;
  --spring-bounce: linear(0,.00541 1.29%,.02175 2.68%,.04923 4.19%,.08852 5.861%,.17388 8.851%,.48317 18.732%,.57693 22.162%,.65685 25.503%,.72432 28.793%,.78235 32.163%,.83182 35.664%,.87356 39.354%,.91132 43.714%,.94105 48.455%,.96361 53.705%,.97991 59.676%,.9903 66.247%,.99664 74.237%,.99968 84.358%,1.00048);
  --spring-fast-bounce-duration: 1s;
  --spring-fast-bounce: linear(0,.00683 1.14%,.02731 2.35%,.11137 5.091%,.59413 15.612%,.78996 20.792%,.92396 25.953%,.97109 28.653%,1.00624 31.503%,1.03801 36.154%,1.0477 41.684%,1.00242 68.787%,.99921);
  --easing-common: ease-in-out;
  --easing-common: linear(0,0,.0001,.0002,.0003,.0005,.0007,.001,.0013,.0016,.002,.0024,.0029,.0033,.0039,.0044,.005,.0057,.0063,.007,.0079,.0086,.0094,.0103,.0112,.0121,.0132 1.84%,.0153,.0175,.0201,.0226,.0253,.0283,.0313,.0345,.038,.0416,.0454,.0493,.0535,.0576,.0621,.0667,.0714,.0764,.0816 5.04%,.0897,.098 5.62%,.1071,.1165,.1263 6.56%,.137,.1481 7.25%,.1601 7.62%,.1706 7.94%,.1819 8.28%,.194,.2068 9.02%,.2331 9.79%,.2898 11.44%,.3151 12.18%,.3412 12.95%,.3533,.365 13.66%,.3786,.3918,.4045,.4167,.4288,.4405,.452,.4631 16.72%,.4759,.4884,.5005,.5124,.5242,.5354,.5467,.5576,.5686,.5791,.5894,.5995,.6094,.6194,.6289,.6385,.6477,.6569,.6659 24.45%,.6702,.6747,.6789,.6833,.6877,.6919,.696,.7002,.7043,.7084,.7125,.7165,.7205,.7244,.7283,.7321,.7358,.7396,.7433,.7471,.7507,.7544,.7579,.7615,.7649,.7685,.7718,.7752,.7786,.782,.7853,.7885,.7918,.7951,.7982,.8013,.8043,.8075,.8104,.8135,.8165,.8195,.8224,.8253,.8281,.8309,.8336,.8365,.8391,.8419,.8446,.8472,.8499,.8524,.855,.8575,.8599,.8625 37.27%,.8651,.8678,.8703,.8729,.8754,.8779,.8803,.8827,.8851,.8875,.8898,.892,.8942,.8965,.8987,.9009,.903,.9051,.9071,.9092,.9112,.9132,.9151,.9171,.919,.9209,.9227,.9245,.9262,.928,.9297,.9314,.9331,.9347,.9364,.9379,.9395,.941,.9425,.944,.9454,.9469,.9483,.9497,.951,.9524,.9537,.955,.9562,.9574,.9586,.9599,.961,.9622,.9633,.9644,.9655,.9665,.9676,.9686,.9696,.9705,.9715,.9724,.9733,.9742,.975,.9758,.9766,.9774,.9782,.9789,.9796,.9804,.9811,.9817,.9824,.9831,.9837,.9843,.9849,.9855,.986,.9866,.9871,.9877,.9882,.9887,.9892,.9896 70.56%,.9905 71.67%,.9914 72.82%,.9922,.9929 75.2%,.9936 76.43%,.9942 77.71%,.9948 79.03%,.9954 80.39%,.9959 81.81%,.9963 83.28%,.9968 84.82%,.9972 86.41%,.9975 88.07%,.9979 89.81%,.9982 91.64%,.9984 93.56%,.9987 95.58%,.9989 97.72%,.9991);
  --user-chat-width: 70%;
  --sidebar-inline-padding: 12px;
  --sidebar-mask: linear-gradient(90deg, #000, #000 84%, transparent 89%, transparent);
  --white: #fff;
  --black: #000;
  --gray-50: #f9f9f9;
  --gray-100: #ececec;
  --gray-200: #e3e3e3;
  --gray-300: #cdcdcd;
  --gray-400: #b4b4b4;
  --gray-500: #9b9b9b;
  --gray-600: #676767;
  --gray-700: #424242;
  --gray-750: #2f2f2f;
  --gray-800: #212121;
  --gray-900: #171717;
  --gray-950: #0d0d0d;
  --red-500: #ef4444;
  --red-700: #b91c1c;
  --brand-purple: #ab68ff;
}
@supports (color:oklch(.99 0 0)) {
  html {
      --sidebar-surface-floating-lightness: 1;
      --sidebar-surface-floating-alpha: 1;
      --sidebar-surface-pinned-lightness: .99;
      --sidebar-surface-pinned-alpha: 1;
  }
}
html{
    --main-surface-background: hsla(0, 0%, 100%, .95);
    --message-surface: hsla(0, 0%, 91%, .5);
    --composer-surface: var(--message-surface);
    --dot-color: var(--black);
    --text-primary: var(--gray-950);
    --text-secondary: #5d5d5d;
    --text-tertiary: var(--gray-400);
    --text-quaternary: var(--gray-300);
    --tag-blue: #08f;
    --tag-blue-light: #0af;
    --text-error: #f93a37;
    --text-danger: var(--red-500);
    --text-placeholder: rgba(0, 0, 0, .7);
    --surface-error: 249 58 55;
    --border-xlight: rgb(0 0 0 / 5%);
    --border-light: rgba(0, 0, 0, .1);
    --border-medium: rgba(0, 0, 0, .15);
    --border-heavy: rgba(0, 0, 0, .2);
    --border-xheavy: rgba(0, 0, 0, .25);
    --hint-text: #08f;
    --hint-bg: #b3dbff;
    --border-sharp: rgb(0 0 0 / 5%);
    --icon-secondary: #676767;
    --main-surface-primary: var(--white);
    --main-surface-primary-inverse: var(--gray-800);
    --main-surface-secondary: var(--gray-50);
    --main-surface-secondary-selected: rgba(0, 0, 0, .1);
    --main-surface-tertiary: var(--gray-100);
    --sidebar-surface-primary: var(--gray-50);
    --sidebar-surface-secondary: var(--gray-100);
    --sidebar-surface-tertiary: var(--gray-200);
    --sidebar-title-primary: rgba(40, 40, 40, .5);
    --sidebar-body-primary: #0d0d0d;
    --sidebar-icon: #7d7d7d;
    --link: #2964aa;
    --link-hover: #749ac8;
    --selection: #007aff;
}

.text-token-text-secondary {
  color: var(--text-secondary)
}

.bg-token-main-surface-primary {
  background-color: var(--main-surface-primary)
}


.h-auto {
  height: auto
}

.h-dvh {
  height: 100dvh
}

.h-fit {
  height: fit-content
}

.h-full {
  height: 100%
}

.h-header-height {
  height: 3.5rem
}

.h-max {
  height: max-content
}

.h-px {
  height: 1px
}

.h-screen {
  height: 100vh
}

.h-snc-3 {
  height: var(--snc-3)
}

.h-snc-input-height {
  height: var(--snc-input-height)
}

.h-svh {
  height: 100svh
}


.\@container,.\@container\/thread {
  container-type: inline-size
}

.\@container\/thread {
  container-name: thread
}
.btn {
  align-items: center;
  border-color: transparent;
  border-radius: 9999px;
  border-width: 1px;
  display: inline-flex;
  flex-shrink: 0;
  font-size: .875rem;
  font-weight: 500;
  justify-content: center;
  line-height: 1.25rem;
  min-height: 38px;
  padding: .5rem .875rem;
  pointer-events: auto
}

.btn:focus {
  outline: 2px solid transparent;
  outline-offset: 2px
}

.btn:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px
}

.btn:disabled {
  cursor: not-allowed;
  opacity: .5
}

.btn:active {
  opacity: .8
}

.btn-green {
  --tw-bg-opacity: 1;
  --tw-text-opacity: 1;
  background-color: rgb(16 163 127/var(--tw-bg-opacity));
  color: rgb(255 255 255/var(--tw-text-opacity))
}

@media (hover: hover) and (pointer:fine) {
  .btn-green:hover {
      --tw-bg-opacity:1;
      background-color: rgb(26 127 100/var(--tw-bg-opacity))
  }
}

.btn-green:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(25 195 125/var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)
}

.btn-blue {
  --tw-bg-opacity: 1;
  --tw-text-opacity: 1;
  background-color: rgb(0 102 222/var(--tw-bg-opacity));
  color: rgb(255 255 255/var(--tw-text-opacity))
}

@media (hover: hover) and (pointer:fine) {
  .btn-blue:hover {
      --tw-bg-opacity:1;
      background-color: rgb(29 78 216/var(--tw-bg-opacity))
  }
}

.btn-blue:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(29 78 216/var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)
}

.btn-primary {
  --tw-bg-opacity: 1;
  --tw-text-opacity: 1;
  background-color: rgb(13 13 13/var(--tw-bg-opacity));
  color: rgb(255 255 255/var(--tw-text-opacity))
}

@media (hover: hover) and (pointer:fine) {
  .btn-primary:hover {
      --tw-bg-opacity:1;
      background-color: rgb(33 33 33/var(--tw-bg-opacity))
  }
}

.btn-primary:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(155 155 155/var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)
}

.btn-primary:is(.dark *) {
  --tw-bg-opacity: 1;
  --tw-text-opacity: 1;
  background-color: rgb(249 249 249/var(--tw-bg-opacity));
  color: rgb(13 13 13/var(--tw-text-opacity))
}

@media (hover: hover) and (pointer:fine) {
  .btn-primary:hover:is(.dark *) {
      --tw-bg-opacity:1;
      background-color: rgb(236 236 236/var(--tw-bg-opacity))
  }
}

.btn-danger {
  --tw-bg-opacity: 1;
  --tw-text-opacity: 1;
  background-color: rgb(239 68 68/var(--tw-bg-opacity));
  color: rgb(255 255 255/var(--tw-text-opacity))
}

@media (hover: hover) and (pointer:fine) {
  .btn-danger:hover {
      --tw-bg-opacity:1;
      background-color: rgb(185 28 28/var(--tw-bg-opacity))
  }
}

.btn-danger:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(248 113 113/var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)
}

@media (hover: hover) and (pointer:fine) {
  .btn-danger:disabled:hover {
      --tw-bg-opacity:1;
      background-color: rgb(185 28 28/var(--tw-bg-opacity))
  }
}

.btn-danger-outline {
  --tw-border-opacity: 1;
  --tw-text-opacity: 1;
  background-color: var(--main-surface-primary);
  border-color: rgb(220 38 38/var(--tw-border-opacity));
  border-width: 1px;
  color: rgb(220 38 38/var(--tw-text-opacity))
}

@media (hover: hover) and (pointer:fine) {
  .btn-danger-outline:hover {
      background-color:var(--main-surface-secondary)
  }
}

.btn-danger-outline:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(220 38 38/var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)
}

.btn-secondary {
  background-color: var(--main-surface-primary);
  border-color: var(--border-medium);
  border-width: 1px;
  color: var(--text-primary);
  font-size: .875rem;
  line-height: 1.25rem
}

@media (hover: hover) and (pointer:fine) {
  .btn-secondary:hover {
      background-color:var(--main-surface-secondary)
  }
}

.btn-secondary:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(103 103 103/var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)
}

@media (hover: hover) and (pointer:fine) {
  .btn-ghost:hover {
      background-color:#0000000d
  }
}

.btn-ghost:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  --tw-ring-color: rgba(0,0,0,.05);
  box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);
  outline: 2px solid transparent;
  outline-offset: 2px
}

@media (hover: hover) and (pointer:fine) {
  .btn-ghost:hover:is(.dark *) {
      background-color:#ffffff1a
  }
}

#app{
  height:100vh;
  width: 100vw;
}